<template>
  <view v-if="shenheStatus == 0" >
    <view>
      <view class="step1" v-if="user_info.is_distributor == 0">
        <view class="info-bg">
          <image
            class="bg"
            mode="aspectFill"
            :src="share_setting.pic_url_1"
          ></image>
        </view>
        <view class="info">
          <view class="info-label flex-row">
            <view class="flex-y-center">
              {{ $t('user.join') }}
              <view
                class="info-red"
                style="
                  width: 260rpx;
                  overflow: hidden;
                  -webkit-line-clamp: 1;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                "
              >
                {{ $t('adminPage.distributor') }}</view
              >{{ $t('user.apply') }}
            </view>
          </view>
          <view class="info-label info-content flex-row">
            <view class="info-left flex-y-center">{{
              $t('user.inviter')
            }}</view>
            <view class="info-right flex-row">
              <view class="info-red flex-grow-0 flex-y-center">{{
                user_info.parent
              }}</view>
              <view class="info-gray flex-group-1 flex-y-center"
                >({{ $t('user.check') }})</view
              >
            </view>
          </view>
          <view class="info-label info-content flex-row">
            <view class="info-left flex-grow-0 flex-y-center required">{{
              $t('shop.withdrawName')
            }}</view>
            <view class="info-right flex-grow-1 flex-row flex-y-center">
              <input
                class="name-input"
                name="name"
                placeholder="请填写真实姓名"
                style="width: 100%"
                v-model.trim="form_name"
              />
            </view>
          </view>
          <view class="info-label info-content flex-row">
            <view class="info-left flex-grow-0 flex-y-center required">{{
              $t('my.phone')
            }}</view>
            <view class="info-right flex-grow-1 flex-row flex-y-center">
              <input
                class="mobile-input"
                name="mobile"
                :placeholder="$t('salesman.noPhone')"
                style="width: 100%"
                type="number"
                v-model.trim="form_mobile"
              />
            </view>
          </view>
          <view class="info-label info-content flex-row">
            <view class="info-agree flex-row flex-y-center">
              <view @click="onClickAgree" style="display: inline-block">
                <image
                  :src="asyncImgs.share.agree"
                  v-if="agree"
                  class="agree_icon"
                ></image>
                <image
                  :src="asyncImgs.share.un_agree"
                  v-else
                  class="agree_icon"
                ></image>
                <text style="margin-left: 10rpx">{{ $t('mdAdmin.read') }}</text>
              </view>
              <view @click="onClickAgreement" style="color: #014c8c"
                >【{{ $t('salesman.agreement') }}】</view
              >
            </view>
          </view>
        </view>
        <view class="info-btn flex-row">
          <button class="flex-y-content info-btn-content" @click="onApply">
            {{ $t('user.distributor') }}
          </button>
        </view>
        <view class="info">
          <view class="info-label flex-row">
            <view class="flex-y-center">{{ $t('user.privilege') }}</view>
          </view>
          <view class="info-label info-height flex-row">
            <view class="flex-y-center">
              <image class="info-icon" :src="asyncImgs.share.money"></image>
            </view>
            <view class="info-block">
              <view class="info-top bold">{{ $t('user.cash') }}</view>
              <view class="info-bottom">{{ $t('user.takeCash') }}</view>
            </view>
          </view>
          <view class="info-label info-height flex-row">
            <view class="flex-y-center info-block">{{
              $t('user.setting')
            }}</view>
          </view>
        </view>
      </view>
      <view class="step2" v-else>
        <view class="info-bg" style="height: 300rpx">
          <image
            class="bg"
            mode="aspectFill"
            :src="share_setting.pic_url_2"
          ></image>
        </view>
        <view class="info">
          <view class="info-title">
            <image
              style="display: inline-block"
              class="info-images"
              :src="asyncImgs.share.info"
            ></image>
          </view>
          <view class="info-content">{{ $t('user.wait') }}</view>
          <view class="flex-row info-btn1">
            <navigator
              class="flex-y-content btn"
              openType="switchTab"
              url="/pages/home/home"
              >{{ $t('user.shop') }}
            </navigator>
          </view>
        </view>
      </view>
    </view>
    <view class="agree-modal flex-x-center flex-y-center" v-if="show_modal">
      <view style="width: 600rpx; background-color: #fff; border-radius: 20rpx">
        <view
          class="agree-head flex-x-center flex-y-center"
          style="height: 100rpx"
          >{{ $t('user.aggrement') }}</view
        >
        <view class="agree-body">
          <text>{{ share_setting.agree }}</text>
        </view>
        <view
          @click="onClose"
          class="agree-footer flex-x-center flex-y-center"
          >{{ $t('user.read') }}</view
        >
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
import shareApi from '@/api/share.js';

export default {
  components: {
        Shenhe,
  },
  data() {
    return {
      user_info: {},
      share_setting: {},
      agree: 0,
      show_modal: false,
      form_name: '',
      form_mobile: '',
      template_id: [],
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t('title.addShare'),
    });
    this.user_info = uni.getStorageSync('userInfo');
    this.check();
  },
  methods: {
    check: function () {
      shareApi.getCheckStatus({}).then(res => {
        if (res.code == 0) {
          let userInfo = this.user_info;
          userInfo.is_distributor = res.data;
          this.user_info = userInfo;
          this.template_id = res.template_id;
          uni.setStorageSync('userInfo', userInfo);
          if (res.data == 1) {
            this.$utils.toUrl('/user/share/index');
          }
        }
      });

      shareApi.getShareSetting({}).then((res) => {
        if (res.code == 0) {
          this.share_setting = res.data;
        }
      });
    },
    onClickAgree: function () {
      this.agree = !this.agree;
    },
    onClickAgreement: function () {
      this.show_modal = true;
    },
    onClose: function () {
      this.show_modal = false;
      this.agree = 1;
    },
    onApply: function () {
      if (this.form_name == '') {
        this.$u.toast(this.$t('user.noName'));
        return;
      }
      if (this.form_mobile == '') {
        this.$u.toast(this.$t('salesman.noPhone'));
        return;
      }
      if (!this.$u.test.mobile(this.form_mobile)) {
        this.$u.toast(this.$t('user.realPhone'));
        return;
      }
      if (this.agree != 1) {
        this.$u.toast(this.$t('user.readAggrement'));
        return;
      }
      var that = this;
      // #ifdef MP-WEIXIN
      uni.requestSubscribeMessage({
        tmplIds: this.template_id,
        complete() {
          that.submitApply();
        },
      });
      // #endif
      // #ifdef APP-PLUS || H5 || MP-ALIPAY
      this.submitApply();
      // #endif
    },
    submitApply() {
      uni.showLoading({
        title: this.$t('home.loading'),
        mask: true,
      });
      shareApi
        .joinShare({
          name: this.form_name,
          mobile: this.form_mobile,
          agree: this.agree ? 1 : 0,
        })
        .then(res => {
          if (res.code == 0) {
            let userInfo = this.user_info;
            userInfo.is_distributor = 2;
            uni.setStorageSync('userInfo', userInfo);
            uni.redirectTo({ url: '/user/add-share/index' });
          } else {
            this.$u.toast(res.msg);
          }
        })
        .then(() => {
          uni.hideLoading();
        });
    },
  },
};
</script>

<style scoped>
.info-bg {
  width: 100%;
  height: 300rpx;
  background-color: #f7f7f7;
  margin-bottom: 20rpx;
}

.info-bg .bg {
  width: 100%;
  height: 300rpx;
}

.step1 .info {
  width: 100%;
  background-color: #fff;
  border-bottom: 1rpx #e3e3e3 solid;
  border-top: 1rpx #e3e3e3 solid;
  padding: 0 24rpx;
}

.info .info-label {
  width: 100%;
  height: 100rpx;
  border-bottom: 1rpx #e3e3e3 solid;
  color: #353535;
}

.info .info-label:last-child {
  border-bottom: none;
}

.info .info-label .info-red {
  color: #ff4544;
}

.info .info-label .info-gray {
  color: #666;
}

.info .info-label.info-content {
  height: 100rpx;
}

.info-label .info-left {
  width: 176rpx;
}

.info-label .info-left.required::after {
  content: '*';
  color: #ff4544;
}

.info-label .info-agree {
  font-size: 10pt;
}

.info-btn {
  padding: 24rpx;
  background-color: #f7f7f7;
  width: 100%;
}

.info-btn .info-btn-content {
  width: 100%;
  background-color: #ff4544;
  color: #fff;
  font-weight: bold;
  height: 100rpx;
  line-height: 100rpx;
}

.info-label .info-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 24rpx;
}

.info .bold {
  font-weight: bold;
}

.info .info-label.info-height {
  height: auto;
}

.info .info-label .info-block {
  padding: 24rpx 0;
}

.info-block .info-top {
  margin-bottom: 16rpx;
}

.info-block .info-bottom {
  font-size: 9pt;
}

.step2 .info {
  padding: 48rpx 24rpx;
  text-align: center;
}

.step2 .info .info-title {
  width: 100%;
  padding: 40rpx 0;
}

.info-title .info-images {
  width: 80rpx;
  height: 80rpx;
}

.step2 .info-btn1 {
  margin-top: 88rpx;
  padding: 0 24rpx;
  width: 100%;
}

.step2 .info-btn1 .btn {
  width: 100%;
  background-color: #ff4544;
  color: #fff;
  font-weight: bold;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 10rpx;
}

.agree-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.agree-body {
  height: 720rpx;
  overflow: auto;
  padding: 10rpx 20rpx;
}

.agree-footer {
  width: 100%;
  height: 100rpx;
  color: #fff;
  background-color: #ff4544;
  border-radius: 0 0 20rpx 20rpx;
}
.agree_icon {
  width: 32rpx;
  height: 32rpx;
  display: inline-block;
  position: relative;
  top: 5rpx;
}
</style>
